


<template>
  <div>
    <div>
      <wd-navbar
        style="
          position: fixed;
          top: 0;
          width: 100%;
          height: 100rpx;
          background-color: white;
          z-index: 9999;
        "
        title="我的订单"
        left-text=""
        left-arrow
        @click="backpath"
      >
        <template #right>
          <!-- <wd-icon name="search" size="18" /> -->
        </template>
      </wd-navbar>
    </div>
    <div style="margin-top: 20rpx">
      <wd-tabs
        v-model="tab"
        sticky
        swipeable
        animated
        color="#d81e06"
        lineHeight="0px"
        lineWidth="0px"
      >
        <wd-tab title="待付款">
          <view style="margin-top: 120rpx">
            <wd-notice-bar
              text="购物中心如果有问题，可以联系团长进行解决！购物中心如果有问题，可以联系团长进行解决！购物中心如果有问题，可以联系团长进行解决！"
              closable
            />
          </view>
          <div style="" class="box-one">
            <div
              style=""
              class="one"
              v-for="i in shopcarlist.filter((item) => item.state == 1)"
              :key="i._id"
            >
              <div
                style="
                  width: 95%;
                  display: flex;
                  justify-content: space-between;
                  padding: 20rpx;
                "
              >
                <div>
                  {{ dayjs(Number(i.buy_time)).format('YYYY-MM-DD HH:mm:ss') }}
                </div>
                <div>剩余付款时间</div>
              </div>
              <div
                style="
                  display: flex;
                  justify-content: space-between;
                  width: 95%;
                  margin: 0 auto;
                  width: 100%;
                "
              >
                <div style="display: flex; width: 60%">
                  <div>
                    <img
                      :src="i.goodsid.img"
                      alt=""
                      style="width: 220rpx; height: 220rpx"
                    />
                  </div>
                  <div>{{ i.goodsid.name }}</div>
                </div>
                <div style="width: 40%; text-align: right; margin: auto">
                  <span>
                    实付款${{
                      parseFloat(i.goodsid.price * i.shopnum).toFixed(2)
                    }}
                  </span>
                  <div style="margin-top: 40rpx">
                    <wd-button type="error" size="small">去付款</wd-button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </wd-tab>

        <wd-tab title="已完成">
          <wd-status-tip
            image="content"
            tip="暂无已完成"
            v-show="
              shopcarlist.filter((item) => item.state == 2).length === 0
                ? true
                : false
            "
          />
          <div
            style="margin-top: 30rpx"
            class="one"
            v-for="i in shopcarlist.filter((item) => item.state == 2)"
            :key="i._id"
          >
            <div
              style="
                width: 95%;
                display: flex;
                justify-content: space-between;
                padding: 20rpx;
              "
            >
              <div>
                {{ dayjs(Number(i.buy_time)).format('YYYY-MM-DD HH:mm:ss') }}
              </div>
              <div style="color: green">已送达,代提货</div>
            </div>
            <div
              style="
                display: flex;
                justify-content: space-between;
                width: 95%;
                margin: 0 auto;
                width: 100%;
              "
            >
              <div style="display: flex; width: 60%">
                <div>
                  <img
                    :src="i.goodsid.img"
                    alt=""
                    style="width: 220rpx; height: 220rpx"
                  />
                </div>
                <div>{{ i.goodsid.name }}</div>
              </div>
              <div style="width: 40%; text-align: right; margin: auto">
                <span>
                  实付款${{
                    parseFloat(i.goodsid.price * i.shopnum).toFixed(2)
                  }}
                </span>
                <div style="margin-top: 40rpx">
                  <wd-button
                    type="info"
                    size="medium"
                    style="font-size: 40rpx; border: 1rpx soild black"
                    @click="show = true"
                    >取货码</wd-button
                  >
                  <wd-overlay :show="show" @click="show = false">
                    <view class="wrapper">
                      <view class="block" @click.stop="" >
                        <img 
                        style="width: 100%;"
                        src="https://cdn7.axureshop.com/demo/1992135/images/%E9%A6%96%E9%A1%B5/u1111.png" alt="">
                      </view>
                    </view>
                  </wd-overlay>
                </div>
              </div>
            </div>
          </div>
        </wd-tab>
        <wd-tab title="派送中">
          <wd-status-tip
            image="content"
            tip="暂无已完成"
            v-show="
              shopcarlist.filter((item) => item.state == 3).length === 0
                ? true
                : false
            "
          />
          <div
            style="margin-top: 30rpx"
            class="one"
            v-for="i in shopcarlist.filter((item) => item.state == 3)"
            :key="i._id"
            @click="goTopre(i)"
          >
            <div
              style="
                width: 95%;
                display: flex;
                justify-content: space-between;
                padding: 20rpx;
              "
              @click="goTopre(i)"
            >
              <div>
                {{ dayjs(Number(i.buy_time)).format('YYYY-MM-DD HH:mm:ss') }}
              </div>
              <div>正在派送</div>
            </div>
            <div
              style="
                display: flex;
                justify-content: space-between;
                width: 95%;
                margin: 0 auto;
                width: 100%;
              "
            >
              <div style="display: flex; width: 60%">
                <div>
                  <img
                    :src="i.goodsid.img"
                    alt=""
                    style="width: 220rpx; height: 220rpx"
                  />
                </div>
                <div>{{ i.goodsid.name }}</div>
              </div>
              <div style="width: 60%; text-align: right; margin: auto">
                <span>
                  实付款${{
                    parseFloat(i.goodsid.price * i.shopnum).toFixed(2)
                  }}
                </span>
                <div style="margin-top: 40rpx">
                  <wd-button type="error" size="small" >查看进度</wd-button>
                </div>
              </div>
            </div>
          </div>
        </wd-tab>
        <wd-tab title="已失效">
          <wd-status-tip
            image="content"
            tip="暂无已完成"
            v-show="
              shopcarlist.filter((item) => item.state == 6).length === 0
                ? true
                : false
            "
          />
          <div
            style="margin-top: 30rpx"
            class="one"
            v-for="i in shopcarlist.filter((item) => item.state == 6)"
            :key="i._id"
          >
            <div
              style="
                width: 95%;
                display: flex;
                justify-content: space-between;
                padding: 20rpx;
              "
            >
              <div>
                {{ dayjs(Number(i.buy_time)).format('YYYY-MM-DD HH:mm:ss') }}
              </div>
            </div>
            <div
              style="
                display: flex;
                justify-content: space-between;
                width: 95%;
                margin: 0 auto;
                width: 100%;
              "
            >
              <div style="display: flex; width: 60%">
                <div>
                  <img
                    :src="i.goodsid.img"
                    alt=""
                    style="width: 220rpx; height: 220rpx"
                  />
                </div>
                <div>{{ i.goodsid.name }}</div>
              </div>
              <div style="width: 40%; text-align: right; margin: auto">
                <span>
                  实付款${{
                    parseFloat(i.goodsid.price * i.shopnum).toFixed(2)
                  }}
                </span>
                <div style="margin-top: 40rpx">
                  <wd-button type="info" size="small">已失效</wd-button>
                </div>
              </div>
            </div>
          </div>
        </wd-tab>

        <wd-tab title="待评价">
          <wd-status-tip
            image="content"
            tip="暂无已完成"
            v-show="
              shopcarlist.filter((item) => item.state == 3).length === 0
                ? true
                : false
            "
          />
          <div
            style="margin-top: 30rpx"
            class="one"
            v-for="i in shopcarlist.filter((item) => item.state == 3)"
            :key="i._id"
            @click="goToDetail(i)"
          >
            <div
              style="
                width: 95%;
                display: flex;
                justify-content: space-between;
                padding: 20rpx;
              "
            >
              <div>
                {{ dayjs(Number(i.buy_time)).format('YYYY-MM-DD HH:mm:ss') }}
              </div>
              <div>提货成功</div>
            </div>
            <div
              style="
                display: flex;
                justify-content: space-between;
                width: 95%;
                margin: 0 auto;
                width: 100%;
              "
            >
              <div style="display: flex; width: 60%">
                <div>
                  <img
                    :src="i.goodsid.img"
                    alt=""
                    style="width: 220rpx; height: 220rpx"
                  />
                </div>
                <div>{{ i.goodsid.name }}</div>
              </div>
              <div style="width: 60%; text-align: right; margin: auto">
                <span>
                  实付款${{
                    parseFloat(i.goodsid.price * i.shopnum).toFixed(2)
                  }}
                </span>
                <div style="margin-top: 40rpx">
                  <wd-button type="error" size="small">去评价</wd-button>
                </div>
              </div>
            </div>
          </div>
        </wd-tab>
      </wd-tabs>
    </div>
  </div>
</template>
<script setup lang="ts">
import { useshopcar } from '@/store/shopcar.ts'; //获取store

import { storeToRefs } from 'pinia';

const shopcar = useshopcar();
const { shopcarlist } = storeToRefs(shopcar);
import { computed, ref } from 'vue';
import { dayjs } from 'wot-design-uni';
const backpath = () => {
  uni.navigateBack({
    delta: 1,
  });
};
const tab = ref<number>(0);
const show = ref(false);
const goToDetail = (i: any) => {
  
  uni.navigateTo({
  
    url: '/pages/ShoppingPages/shopping/Cart_detail?_id=' + JSON.stringify(i._id),
  });
}
const goTopre=(i)=>{
  uni.navigateTo({
  url: '/pages/ShoppingPages/shopping/Preparation?_id=' + JSON.stringify(i._id),
});
}
</script>

<style scoped lang="scss">
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.block {
  width: 120px;
  height: 120px;
  background-color: #fff;
}
.box-one {
  width: 100%;
  height: 80vh;

  background-color: rgb(225, 225, 225);

  .one {
    width: 95%;
    height: 300rpx;
    margin: 20rpx auto;
    background-color: white;
    border-radius: 10rpx;
  }
}
.wd-tabs__nav-container[data-v-c72f40b5] {
  position: fixed !important;
}
</style>